<template>
	<view class="container">
		<u-navbar :border-bottom="false" :background="{ background: 'linear-gradient(to right, #A36BFF 0%, #6D4BBE 100%)' }" title="门店详情" title-color="#fff" back-icon-color="#fff"></u-navbar>
		<view class="wd-flex venue-title">
			<view class="wd-flex-cell">{{formData.name}}</view>
			<u-button type="default" size="mini" shape="circle" :plain="true" :custom-style="{width:'110rpx',marginLeft:'24rpx',color:'#fff',background:'rgba(0,0,0,0)'}" v-if="!formStatus" @click="formStatus=true">编辑</u-button>
		</view>
		<u-form class="venue-form" ref="uForm" label-position="left" label-width="auto" :model="formData" :rules="rules" :errorType="['message']">
			<view class="wd-form-wrapper">
				<u-form-item label="门店名称" prop="name">
					<u-input type="text" placeholder="请输入" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.name"></u-input>
				</u-form-item>
				<u-form-item label="联系人" prop="connector" :right-icon="formStatus?'':''" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="input" placeholder="请输入" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.connector" ></u-input>
				</u-form-item>
				<u-form-item label="类型" prop="type" :right-icon="formStatus?'arrow-right':''" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<multi-selects :items="typeList" @change="bindTypeChange" id_key="id" name_key="name"  :value="formData.type" ref="pickers">
					    <view>
					        <view class="tr">{{selectType?selectType.name:"请选择"}}</view>
					    </view>
					</multi-selects>
				</u-form-item>
				<u-form-item label="联系方式" prop="mobile">
					<u-input type="number" placeholder="请输入" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.mobile"></u-input>
				</u-form-item>
				<u-form-item label="所在地区" prop="region" :right-icon="formStatus?'arrow-right':''" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<multi-selects :items="areas" @change="bindRegionChange" id_key="id" name_key="name" children_key="childlist" :value="formData.region_id" ref="pickers" >
					    <view>
					        <!-- <view class="fs30 col5">所在地区</view> -->
					        <view class="tr">{{selectedDistrict?selectedProvince.name +"-"+ selectedCity.name +'-'+ selectedDistrict.name:"请选择"}}</view>
					    </view>
					</multi-selects>
				</u-form-item>
				
				<u-form-item label="详细地址" prop="detail">
					<u-input type="text" placeholder="请输入" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.detail"></u-input>
				</u-form-item>
			</view>
			<view class="wd-form-wrapper">
				<u-form-item prop="description">
					<u-input type="textarea" placeholder="请输入简介内容（非必填项）" placeholder-style="{color: '#999999'}" :clearable="false" height="140" :auto-height="true" v-model="formData.description"></u-input>
				</u-form-item>
			</view>
			<view class="wd-form-wrapper">
				<view class="wd-form-upload">
					<view class="wd-form-upload__cell">
						<view class="title">场馆图片</view>
						<view v-if="!formStatus" class="upload" :class="{'upload-none':!formData.image}">
							<image :src="formData.image?formData.image:'../../../static/icons/icon_upload-none.png'" mode="aspectFill"></image>
						</view>
						<view v-else>
							<view class="upload upload-show" v-if="!thumbShow&&formData.image" @click="formItemClick('thumbShow')">
								<image :src="formData.image" mode="aspectFill"></image>
							</view>
							<u-upload v-else ref="uUpload1"  :action="action" :show-upload-list="true" width="154" height="154" max-count="1" :auto-upload="true" v-on:on-success="uploadImageSuccess"></u-upload>
						</view>
					</view>
					<view class="wd-form-upload__cell">
						<view class="title">公众号二维码</view>
						<view v-if="!formStatus" class="upload" :class="{'upload-none':!formData.qrcode_image}">
							<image :src="formData.qrcode_image?formData.qrcode_image:'../../../static/icons/icon_upload-none.png'" mode="aspectFill"></image>
						</view>
						<view v-else>
							<view class="upload upload-show" v-if="!codeShow&&formData.qrcode_image" @click="formItemClick('codeShow')">
								<image :src="formData.qrcode_image" mode="aspectFill"></image>
							</view>
							<u-upload v-else ref="uUpload1" :action="action" :show-upload-list="true" width="154" height="154" max-count="1" :auto-upload="true" v-on:on-success="uploadQrcodeSuccess"></u-upload>
						</view>
					</view>
				</view>
			</view>
		</u-form>
		
		<view class="wd-form-footer" v-if="formStatus">
			<view class="wd-form-footer__btn">
				<u-button :custom-style="wd_button_primary" shape="circle" :ripple="true" @click="submit">保存</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import multiSelects from '@/components/multi-selects/multi-selects.vue';
	export default {
		components: {
		    multiSelects
		},
		data() {
			return {
				action:'',
				shop_id:0,
				formStatus: false,
				areas:[],
				selectedProvince:null,
				selectedCity: null,
				selectedDistrict: null,
				formData: {
					name: '',
					connector: '',
					type: 0,
					mobile: '',
					province_id:'',
					city_id:'',
					region_id:0,
					detail: '',
					description: '',
					image: '',
					qrcode_image: ''
				},
			
				typeShow: false,
				typeList: [
					{ id: 1, name: '总店' },
					{ id: 2, name: '分店' },
					{ id: 3, name: '加盟' },
				],
				selectType:null,
				rules:{},
				thumbShow: false,
				codeShow: false
			}
		},
		onLoad(options){
			this.action = getApp().globalData.apiUri+'/fitness.common/upload';
			if(options.shop_id && options.shop_id > 0){
				this.shop_id = options.shop_id || 0;
				this.fetchShopDetail()
			}else{
				this.formStatus = true;
			}
			
			this.$utils.getAreaTree().then(areas=>{
				//console.log(areas);
				this.areas = areas;
			})
		},
		methods: {
			
			//获取详情
			fetchShopDetail(){
				var shop_id = this.shop_id;
				this.$core.get({url:'fitness.manage/shop_detail',data:{shop_id:shop_id},success:(ret)=>{
					ret.data.region = ret.data.Area.province + '-' + ret.data.Area.city + '-' + ret.data.Area.region;
					ret.data.province_code = ret.data.Area.province_code;
					ret.data.city_code = ret.data.Area.city_code;
					ret.data.region_code = ret.data.Area.region_code;
				    this.formData = ret.data;
				}});
			},
			
			
			//编辑-查看切换
			formItemClick(name) {
				if (this.formStatus) {
					this[name] = true
				}
			},
			
			// 请选择场馆类型
			bindTypeChange(e) {
				let typeIndex = e.indexValues;
				let typeList = this.typeList;
				this.formData.type = typeList[typeIndex[0]].id;
				this.selectType = {
					id: typeList[typeIndex[0]].id,
					'name': typeList[typeIndex[0]].name
				};
			},
			bindRegionChange(e) {
			    let areaIndex = e.indexValues;
			    let areas = this.areas;
			    this.formData.province_id = areas[areaIndex[0]].id;
			    this.formData.city_id = areas[areaIndex[0]].childlist[areaIndex[1]].id;
			    this.formData.region_id = areas[areaIndex[0]].childlist[areaIndex[1]].childlist[areaIndex[2]].id;
			    this.selectedProvince = {
			    	id: areas[areaIndex[0]].id,
			    	'name': areas[areaIndex[0]].name
			    };
			    this.selectedCity = {
			    	id: areas[areaIndex[0]].childlist[areaIndex[1]].id,
			    	'name': areas[areaIndex[0]].childlist[areaIndex[1]].name
			    };
			    this.selectedDistrict = {
			    	id: areas[areaIndex[0]].childlist[areaIndex[1]].childlist[areaIndex[2]].id,
			    	'name': areas[areaIndex[0]].childlist[areaIndex[1]].childlist[areaIndex[2]].name
			    };
			},
			
			//图片上传成功
			uploadImageSuccess(e){
				this.formData.image = e.data.fullurl;
			},
			uploadQrcodeSuccess(e){
				console.log(e);
				this.formData.qrcode_image = e.data.fullurl;
			},
			submit() {
				var that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						var formData = that.formData;
						formData['shop_id'] = that.shop_id;
						that.$core.post({url:'fitness.manage/set_shop',data:formData,success:(ret)=>{
							that.getOpenerEventChannel().emit("setSuccess",{})
							uni.showToast({title: ret.msg,icon: 'none',})
							uni.navigateBack({})
						}});
						
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.venue-title {
		padding: 24rpx;
		padding-bottom: 120rpx;
		background: linear-gradient(to right, #A36BFF 0%, #6D4BBE 100%);
		line-height: 45rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		border-radius: 0 0 24rpx 24rpx;
	}
	.venue-form {
		position: relative;
		margin-top: -110rpx;
		display: block;
	}
	.wd-form-upload {
		display: flex;
		&__cell {
			margin-right: 60rpx;
			.title {
				margin-bottom: 18rpx;
				line-height: 38rpx;
				font-size: 26rpx;
				color: #333333;
			}
			.upload {
				position: relative;
				display: block;
				width: 220rpx;
				height: 154rpx;
				border-radius: 24rpx;
				overflow: hidden;
				&-none {
					width: 154rpx;
				}
				&-show:before {
					content: "";
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0, 0, 0, 0.4);
				}
				&-show:after {
					content: "编辑";
					display: block;
					position: absolute;
					top: 50%;
					left: 0;
					right: 0;
					margin-top: -20rpx;
					text-align: center;
					line-height: 40rpx;
					font-size: 26rpx;
					color: #FFFFFF;
				}
				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			/deep/ .u-list-item {
				background: #FFFFFF;
			}
		}
	}
</style>